<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>javascript组件化</title>
	<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
    <script>
       var TextCount=(function(){
       	    //注册事件、得到个数、渲染、初始化
       	    var input;
            var _bind=function(that){

            	input.on("keyup",function(){
            		that.render();
            	});
            }
            var _getNum=function(){
            	return input.val().length;
            }
            var TextCountFun=function(){}
            //初始化和渲染是公共事件
            TextCountFun.prototype.init=function(opts){
                   input=$(opts.id);
                   _bind(this);
                   return this;
            }
            TextCountFun.prototype.render=function(){
        
              if($("#countNum").length==0){
               var count=$('<span id="countNum"></span>');
                 input.after(count);
                }
               var num=_getNum();
               $("#countNum").html(num+" 个数");
             

            }
            return TextCountFun;
        })();
       $(function(){
       	  new TextCount().init({id:'#J_input'}).render();
       });
    </script>
	<input type="text" id="J_input"/>
</body>
</html>